<template>
  <el-scrollbar class="form-panel representative">
    <el-form :model="params" class="demo-form-inline" ref="params" :rules="rules" label-position="top">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="$t('supplier.registerAudit.name')" prop="name">
            <el-input
              v-model.trim="params.name"
              maxlength="50"
              :placeholder="$t('supplier.registerAudit.namePlaceholder')"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item :label="$t('supplier.registerAudit.cardType')" prop="certificateType">
            <x-select
              :placeholder="$t('supplier.registerAudit.cardTypePlaceholder')"
              v-model="params.certificateType"
              :options="dictOptions['certificate_type']"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('supplier.registerAudit.cardCode')" prop="certificateNumber">
            <el-input
              v-model="params.certificateNumber"
              clearable
              maxlength="50"
              :placeholder="$t('supplier.registerAudit.cardCodePlaceholder')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('supplier.registerAudit.phone')" prop="mobile">
            <el-input
              v-model="params.mobile"
              :placeholder="$t('supplier.registerAudit.phonePlaceholder')"
              clearable
              maxlength="50"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-scrollbar>
</template>
<script>
  import { omit, cloneDeep, checkMobilePhone } from '@package/utils'
  import { apiPostAddCorporation, apiGetCorporation, apiPostUpdateCorporation } from '../api/record'
  import { EnumApiCode } from '../../../../../../globalEnum.js'

  export default {
    name: 'Representative',
    props: {
      dictOptions: {
        type: Object,
        default: () => ({})
      },
      supplierId: {
        type: String
      }
    },
    data() {
      return {
        params: {
          name: '',
          mobile: '',
          certificateType: '',
          certificateNumber: ''
        },
        rules: {
          name: [{ required: true, message: this.$t('supplier.registerAudit.namePlaceholder'), trigger: 'blur' }],
          mobile: [
            { required: true, message: this.$t('supplier.registerAudit.phonePlaceholder'), trigger: 'blur' },
            { validator: this.validatePhone, trigger: 'blur' }
          ],
          certificateType: [
            {
              required: true,
              message: this.$t('supplier.registerAudit.cardTypePlaceholder'),
              trigger: ['blur', 'change']
            }
          ],
          certificateNumber: [
            { required: true, message: this.$t('supplier.registerAudit.cardCodePlaceholder'), trigger: 'blur' }
          ]
        }
      }
    },
    watch: {
      supplierId: {
        handler(val) {
          if (val) {
            this.getDetail()
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      async getDetail() {
        const { data } = await apiGetCorporation(this.supplierId)
        this.params = Object.assign(this.params, cloneDeep(data))
      },
      handleVaildForm() {
        return new Promise((resolve) => {
          this.$refs.params.validate((valid) => {
            resolve(valid)
          })
        })
      },
      onSumit(isVaild = true) {
        return new Promise(async (resolve, reject) => {
          const isSubmit = !isVaild || (await this.handleVaildForm())
          if (isSubmit) {
            const param = {
              ...this.params,
              supplierId: this.supplierId
            }
            try {
              const { data, code } =
                'id' in this.params ? await apiPostUpdateCorporation(param) : await apiPostAddCorporation(param)
              if (EnumApiCode.Success === code) {
                // this.getDetail()
                resolve(data)
              } else {
                reject()
              }
            } finally {
              reject()
            }
          } else {
            reject()
          }
        })
      },
      validatePhone(rule, value, callback) {
        if (value && value !== '' && !checkMobilePhone(value)) {
          callback(new Error(this.$t('supplier.registerAudit.pleasePhoneRight')))
        } else {
          callback()
        }
      }
    }
  }
</script>
